<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>index</title>
	</head>
	<body>
		<div id="app" style="visibility: hidden;">
			<div id="view1">Now Time：{item}</div>
			<ul id="list1">
				<li>{item.id}.{item.txt}</li>
			</ul>
		</div>
		<script src="./js/jquery-3.5.1.min.js"></script>
		<script src="./js/jquery-render.js"></script>
		<script>
			$(document).ready(function(){
				$.initApp({
					elem: '#app',
					data: {
						view1:'Hello World!',
						list1:[
							{ id: 1, txt: '学历史' },
							{ id: 2, txt: '懂感恩' },
							{ id: 3, txt: '听呼唤' },
							{ id: 4, txt: '看方向' }
						]
					},
					onLoad(){
						//TODO: 这里加载入口开始实现自己的逻辑
						console.log('onload');
						var com = this.ids;
						var index = 0;
						var c=2;
						setInterval(function(){
							//使用render方法就可以更新数据
							com.view1.render((new Date()).toString());
							
							//使用elem实例操作该元素
							var lis = com.list1.elem.find('li');
							lis.eq(index++).css('color',index%c==0?'red':'blue');
							if (index>=lis.length) {
								c++;
								if (c>lis.length) c=2;
								index=0;
							}
						},1100);
					},
					onReady(){
						//上一个onLoad() 处理完之后的调用
						
						//打印查看初始化封装实例
						console.log(this);
						
						this.m1('abc');
					},
					methods:{
						m1(e){
							console.log('m1'+e)
						}
					}
				});
			})
		</script>
	</body>
</html>
